<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="6" class="card-col">
        <CommonCard title="今日销售额" :value="homeData.salesToday">
          <div class="compare">
            日同比 {{ homeData.salesGrowthLastDay }}%
            <el-icon>
              <CaretBottom style="color: red" />
            </el-icon>
          </div>
          <div class="compare">
            月同比 {{ homeData.salesGrowthLastMonth }}%
            <el-icon>
              <CaretTop style="color: green" />
            </el-icon>
          </div>
          <template #footer>
            <div>昨日销售额¥ {{ homeData.salesLastDay }}</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="card-col">
        <CommonCard title="今日订单" :value="homeData.orderToday">
          <LineChart
            :orderTrend="homeData.orderTrend"
            :orderTrendAxis="homeData.orderTrendAxis"
          />
          <template #footer>
            <div>昨日订单量¥ {{ homeData.orderLastDay }}</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="card-col">
        <CommonCard title="今日交易用户数" :value="homeData.orderUser">
          <BarChart
            :orderUserTrend="homeData.orderUserTrend"
            :orderUserTrendAxis="homeData.orderUserTrendAxis"
          />
          <template #footer>
            <div>退货率{{ homeData.returnRate }}%</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="card-col">
        <CommonCard title="累计用户数" :value="homeData.usersTotal">
          <ProgressChart :usersLastMonth="homeData.usersLastMonth" />
          <template #footer>
            <span class="">
              日同比 {{ homeData.userGrowthLastDay }}%
              <el-icon>
                <CaretTop style="color: green" />
              </el-icon>
            </span>
            <span>
              月同比 {{ homeData.userGrowthLastMonth }}%
              <el-icon>
                <CaretBottom style="color: red" />
              </el-icon>
            </span>
          </template>
        </CommonCard>
      </el-col>
    </el-row>

    <SalesVisited
      :orderFullYearAxis="homeData.orderFullYearAxis"
      :orderFullYear="homeData.orderFullYear"
      :userFullYearAxis="homeData.userFullYearAxis"
      :userFullYear="homeData.userFullYear"
    />

    <PieChart />

    <ChartMap />

    <ChinaChart />
  </div>
</template>

<script lang="ts">
export default {
  name: "CHome",
};
</script>
<script lang="ts" setup>
import CommonCard from "./components/common-card.vue";
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
import LineChart from "./components/line-chart.vue";
import BarChart from "./components/bar-chart.vue";
import ProgressChart from "./components/progress-chart.vue";
import SalesVisited from "./components/sales-visited.vue";
import PieChart from "./components/pie-chart.vue";
import ChinaChart from "./components/china-map.vue";
import { getHomeDataApi } from "@/api/mock/home";
import { onMounted, ref } from "vue";

// 地图
import ChartMap from "./components/chart-map.vue";

const homeData = ref<any>({
  orderTrend: [],
  orderTrendAxis: [],
  orderUserTrend: [],
  orderUserTrendAxis: [],
  orderFullYearAxis: [],
  orderFullYear: [],
  userFullYearAxis: [],
  userFullYear: [],
  searchWord: [],
  usersLastMonth: 0,
  salesToday: 0,
  orderToday: 0,
  orderUser: 0,
  usersTotal: 0,
});

onMounted(async () => {
  homeData.value = await getHomeDataApi();

  const wordArr = homeData.value.searchWord.map((item: any) => {
    return item.word;
  });
  const countArr = homeData.value.searchWord.map((item: any) => {
    return item.count;
  });
  const userArr = homeData.value.searchWord.map((item: any) => {
    return item.user;
  });

  // console.log(wordArr);
  // console.log(countArr);
  // console.log(userArr);
});
</script>

<style scoped>
.card-col {
  margin-bottom: 10px;
}
.compare {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  padding: 5px 0;
}
</style>
